<template>
  <!--商品管理-课程管理 -->
  <div>
    <div>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model="queryForm.goods_name"
            placeholder="请输入商品名"
          ></el-input>
        </el-form-item>
        <el-form-item label="关联课程">
          <el-select
            @change="searchFn"
            v-model="queryForm.course_id"
            filterable
            placeholder="请选择关联课程"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in courseArr"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-select
            @change="searchFn"
            v-model="queryForm.course_type"
            placeholder="请选择课程类型"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in selectArr.course_type"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            @change="searchFn"
            v-model="queryForm.status"
            placeholder="请选择状态"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in selectArr.status"
              :key="index"
              :label="item.label"
              :value="item.real_value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFn()">搜索</el-button>
          <el-button type="primary" @click="addGoods()">新增商品</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        header-cell-class-name="thead"
      >
        <el-table-column prop="date" label="ID">
          <template slot-scope="scope">
            <b>{{ scope.row.id }}</b>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="商品名称" width="300">
          <template slot-scope="scope">
            <h2>{{ scope.row.goods_name }}</h2>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="关联课程">
          <template slot-scope="scope">
            <p>{{ scope.row.rel_course }}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="课程类型">
          <template slot-scope="scope">
            <div class="z-display-flex">
              <b>{{ filterArr('course_type', scope.row.course_type) }}</b>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="价格(售价)">
          <template slot-scope="scope">
            <b>{{ scope.row.retail_price }}</b>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="上架时间">
          <template slot-scope="scope">
            <b>{{ scope.row.list_time }}</b>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="下架时间">
          <template slot-scope="scope">
            <b>{{ scope.row.delist_time }}</b>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="状态">
          <template slot-scope="scope">
            <b v-if="scope.row.status == 0" class="u-text-B22222">未上架</b>
            <b v-if="scope.row.status == 1" class="u-text-009933">已上架</b>
            <b v-if="scope.row.status == 2" class="u-text-cccccc">已下架</b>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div>
              <a @click="addGoods(scope.row.id)">编辑</a>
              <a
                v-if="scope.row.status == 0 || scope.row.status == 2"
                @click="upDownIn(scope.row, 1)"
                >上架</a
              >
              <a v-else @click="upDownIn(scope.row, 2)">下架</a>
              <el-popconfirm
                title="确定要删除课程商品？"
                v-if="scope.row.status != 1"
                @onConfirm="deleteTable(scope.row)"
              >
                <a slot="reference">删除</a>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  queyEnumByTableName,
  cascadeQuery,
  tableUpdate,
  tableDeleted
} from '@/api/api.js'
import { courseListEunm } from '@/api/course.js'
import { goodsDelete, goodsIn, goodsOut } from '@/api/goods.js'

export default {
  data () {
    return {
      courseArr: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      queryForm: {
        status: '',
        course_type: '',
        name: ''
      },
      tableData: [],
      selectArr: {
        status: [],
        course_type: [],
        course_id: []
      }
    }
  },
  activated () {
    this.getSelectData()
  },
  methods: {
    // 删除
    async deleteTable (e) {
      let res = await goodsDelete([
        {
          table_name: 'nice_goods_virtual',
          where: {
            id: [e.id]
          }
        }
      ])
      if (res[0]) {
        return
      }
      this.getTableData()
    },
    // 上架下架
    async upDownIn (e, status) {
      if (status === 1) {
        let res = await goodsIn([
          {
            table_name: 'nice_goods_virtual',
            update: [
              {
                status: status
              }
            ],
            where: [
              {
                id: e.id
              }
            ]
          }
        ])
        if (res[0]) {
          return
        }
      } else {
        let res = await goodsOut([
          {
            table_name: 'nice_goods_virtual',
            update: [
              {
                status: status
              }
            ],
            where: [
              {
                id: e.id
              }
            ]
          }
        ])
        if (res[0]) {
          return
        }
      }

      this.getTableData()
    },
    // 获取表数据
    async getTableData () {
      let res = await cascadeQuery({
        table_name: 'nice_goods_virtual',
        condition: [
          { goods_name: [{ like: this.queryForm.goods_name }] },
          { status: [{ '=': this.queryForm.status }] },
          { course_type: [{ '=': this.queryForm.course_type }] },
          { 'goods_course.course_id': [{ '=': this.queryForm.course_id }] }
        ],
        by_order: 'create_time desc, goods_number desc',
        member: 'rel_course',
        by_page: { currPage: this.pageIndex, pageSize: this.pageSize }
      })
      if (res[0]) {
        return
      }
      this.totalPage = res[1].data.totalCount
      this.tableData = res[1].data.list
    },
    // 下拉菜单过滤
    filterArr (field, val) {
      let arr = this.selectArr[field]
      // console.log(arr)
      let label
      arr.map(item => {
        if (parseInt(val) === parseInt(item.value)) {
          label = item.label
        }
        if (parseInt(item.children) && parseInt(item.children.length) > 0) {
          item.children.map(item2 => {
            if (val === item2.value) {
              label = item.label
            }
          })
        }
      })
      return label
    },
    // 获取下拉菜单数据
    async getSelectData () {
      let res = await queyEnumByTableName({ tableName: 'nice_goods_virtual' })
      if (res[0]) {
        return
      }
      let arr = res[1].data
      Object.keys(this.selectArr).forEach(item => {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].fieldName === item) {
            this.selectArr[item] = arr[i].child
          }
        }
      })
      let res2 = await courseListEunm({ 'nice_course.type': null })
      if (res[0]) {
        return
      }
      this.courseArr = res2[1].data.list

      this.selectArr = JSON.parse(
        JSON.stringify(this.selectArr)
          .split('display_value')
          .join('label')
          .split('child')
          .join('children')
          .split('t_id')
          .join('value')
      )
      console.log(this.selectArr)
      // this.selectArr.grade.unshift({ label: '全部', value: '', children: [] })
      this.getTableData()
    },
    searchFn () {
      this.pageIndex = 1
      this.getTableData()
    },
    addGoods (e) {
      if (e) {
        this.$router.push({ name: 'add-goods', query: { id: e } })
      } else {
        this.$router.push({ name: 'add-goods' })
      }
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getTableData()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getTableData()
    }
  }
}
</script>
<style scoped>
a {
  cursor: pointer;
}
.u-text-B22222 {
  color: #b22222;
}
.u-text-009933 {
  color: #009933;
}
.u-text-cccccc {
  color: #cccccc;
}
</style>
